<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_55')}}</h2>
            <div class="personCon">
                <div class="leftpanel">
                    <h2 class="persontitle">{{$t('l.personal_56')}}</h2>
                    <div class="resetpsdbar">
                        <p class="title">{{$t('l.personal_57')}}</p>
                        <div class="putgroup">
                            <input class="comput small" :class="intro.userType!==2?'disabled':''" :disabled="intro.userType!==2" v-model="accountName">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_58')}}</p>
                        <div class="putgroup">
                            <input class="comput small" v-model="bank" :placeholder="$t('l.personal_59')">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_60')}}</p>
                        <div class="putgroup">
                            <input class="comput small" v-model="branchBank" :placeholder="$t('l.personal_61')">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_62')}}</p>
                        <div class="putgroup">
                            <input class="comput small" v-model="accountNumber" :placeholder="$t('l.personal_63')">
                            <p class="errortext"></p>
                        </div>
                        <a class="btn changebtn" @click="bindBankcard">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
                <div class="rightpanel">
                    <div class="tipbox">
                        <p class="tiptitle">{{$t('l.personal_64')}}</p>
                        <p class="tiptext">1.{{$t('l.personal_65')}}！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    created(){
        this.intro = this.$store.state.userintro;
        if(this.intro.fullName){
            this.accountName = this.intro.fullName
        }else if(this.intro.cellPhone){
            this.accountName = this.intro.cellPhone
        }else{
            this.accountName = this.intro.email
        }
    },
    data(){
        return{
            username:this.$store.state.userintro.userName,
            accountNumber:"",
            branchBank:"",
            bank:"",
            intro:"",
            accountName:""
        }
    },
    methods:{
        //绑定银行卡
        async bindBankcard(){
            let that = this;
            let res = await api.bindPayWay({
                accountName:that.accountName,
                accountNumber:that.accountNumber,
                accountType:3,
                bank:that.bank,
                branchBank:that.branchBank,
                qrCode:""
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.personal_66'));
                that.$router.push({
                    path: "/paymenttype"
                });
            }else if(res.data.code==1080002){
                that.$layer.msg(that.$t('l.add_120'));
            }else if(res.data.code==1010001){
                that.$layer.msg(that.$t('l.add_55'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        async getPayList(){
            let that = this;
            let res = await api.paymentlist({
                pageNum:1,
                pageSize:100
            })
            if(res.data.code==0){
                that.payList = [];
                res.data.data.records.forEach((item,index)=>{
                    if(item.accountType==3){
                        that.bank = item.bank
                        that.branchBank = item.branchBank
                        that.accountNumber = item.accountNumber
                        that.accountName = item.accountName
                    }
                })
            }else{
                that.$layer.msg(res.data.msg);
            }
        }
    },
    mounted(){
        this.getPayList();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rightpanel{
        .tipbox{
            height:455px;
            background:rgba(240,242,253,1);
            border-radius:4px;
            border:1px solid #2D8DFE;
            padding:34px 20px;
            box-sizing: border-box;
            .tiptitle{
                line-height:24px;
                font-weight:500;
                color:rgba(51,56,94,1);
                font-size:16px;
                padding-left:34px;
                background:url(../../assets/images/tip.png) no-repeat left center;
                margin-bottom:26px;
            }
            .tiptext{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:24px;
            }
        }
    }
    .leftpanel{
        .resetpsdbar{
            width:518px;
            margin:58px auto;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .padbtm{
                padding-bottom:20px;
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
            .payqrcodebar{
                height:150px;
                border:1px dashed #DDE0EB;
                margin-top:10px;
                label{
                    width: 100%;
                    height: 100%;
                    display: block;
                }
                .uploadimgbg{
                    text-align:center;
                    padding-top:28px;
                    img{
                        width:31px;
                        height:32px;
                        padding-bottom:10px;
                    }
                    h2{
                        font-size:16px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:24px;
                        padding-bottom:4px;
                    }
                    p{
                        font-size:14px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:22px;
                    }
                }
            }
        }
    }
}
</style>



